<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="HandheldFriendly" content="true" />
		<script type="text/javascript" src="js/common.js"></script><br />
		
		<script type="text/javascript">
			var pays = {};

			function plusReady() {
				// 获取支付通道,并生成对应的支付按钮
				plus.payment.getChannels(function(channels) {
					var content = document.getElementById('dcontent');
					var info    = document.getElementById("info");
					
					//得到的是支付通道数组
					for (var i in channels) {
						var channel = channels[i];
						pays[channel.id] = channel;
						var temp = document.createElement('p');
						var txtstr = '';
						txtstr += "标识:" + channel.id + "  ";			//支付通道标识
						txtstr += "描述:" + channel.description + "  ";	//支付通道描述
						txtstr += "服务:" + channel.serviceReady + "  ";	//支付通道服务是否安装
						temp.innerText = txtstr;
						info.appendChild(temp);
						
						var de = document.createElement('div');
						de.setAttribute('class', 'button');
						de.setAttribute('onclick', 'pay(this.id)');
						de.id = channel.id;
						de.innerText = channel.description + "支付";
						//新增支付按钮
						content.appendChild(de);
						//检测是否安装支付服务
						checkServices(channel);
					}
//					info.innerText = txt;
				}, function(e) {
					outLine("获取支付通道失败：" + e.message);
				});
			}
			
			document.addEventListener('plusready', plusReady, false);
			
			// 检测是否安装支付服务
			function checkServices(pc) {
				if (!pc.serviceReady) {
					var txt = null;
					switch (pc.id) {
						case "alipay":
							txt = "检测到系统未安装“支付宝快捷支付服务”，无法完成支付操作，是否立即安装？";
							break;
						default:
							txt = "系统未安装“" + pc.description + "”服务，无法完成支付，是否立即安装？";
							break;
					}
					plus.nativeUI.confirm(txt, function(e) {
						if (e.index == 0) {
							pc.installService();
						}
					}, pc.description);
				}
			}
			
			var w = null;
			var PAYSERVER = 'http://demo.dcloud.net.cn/payment/?payid=';
			// 点击进行支付操作
			function pay(id) {
				//检查是否请求订单中
				if (w) {
					return;
				} 
				//苹果应用内支付
				if (id === 'appleiap') {
					outSet("应用内支付");
					clicked('payment_iap.html');
					return;
				}
				
				outSet("----- 请求支付 -----");
				var url = PAYSERVER;
				//仅支持支付宝或者微信支付
				if (id == 'alipay' || id == 'wxpay') {
					url += id;
				} else {
					plus.nativeUI.alert("不支持此支付通道！", null, "捐赠");
					return;
				}
				var appid = plus.runtime.appid;
				if (navigator.userAgent.indexOf('StreamApp') >= 0) {
					appid = 'Stream';
				}
				//http://demo.dcloud.net.cn/payment/?payid=alipay&appid=HBuilder&total=1
				url += '&appid=' + appid + '&total=';
				w = plus.nativeUI.showWaiting();
				// 请求支付订单
				var amount = document.getElementById('total').value;
				var xhr = new XMLHttpRequest();
				xhr.onreadystatechange = function() {
					switch (xhr.readyState) {
						case 4:
							w.close();
							w = null;
							if (xhr.status == 200) {
								outLine("----- 请求订单成功 -----");
								outLine(xhr.responseText);
								var order = xhr.responseText;
								plus.payment.request(pays[id], order, function(result) {
									outLine("----- 支付成功 -----");
									outLine(JSON.stringify(result));
									plus.nativeUI.alert("支付成功：感谢你的支持，我们会继续努力完善产品。", function() {
										back();
									}, "捐赠");
								}, function(e) {
									outLine("----- 支付失败 -----");
									outLine("[" + e.code + "]：" + e.message);
									plus.nativeUI.alert("更多错误信息请参考支付(Payment)规范文档：http://www.html5plus.org/#specification#/specification/Payment.html", null, "支付失败：" + e.code);
								});
							} else {
								outLine("----- 请求订单失败 -----");
								outLine(xhr.status);
								plus.nativeUI.alert("获取订单信息失败！", null, "捐赠");
							}
							break;
						default:
							break;
					}
				}
				xhr.open('GET', url + amount);
				outLine("请求支付订单：" + url + amount);
				xhr.send();
			}
		</script>
		<link rel="stylesheet" href="css/common.css" type="text/css" charset="utf-8" />
		<style type="text/css">
			#total {
				-webkit-user-select: text;
				text-align: right;
				padding: 0 1em;
				border: 0px;
				border-bottom: 1px solid #ECB100;
				border-radius: 0;
				font-size: 16px;
				width: 30%;
				outline: none;
			}
		</style>
	</head>

	<body>
		<header id="header">
			<div class="nvtt">Payment</div>
		</header>
		
		<div id="dcontent" class="dcontent">
			<br/>
			<p id="info" style="padding: 0 1em;text-align:left;">支付通道信息：</p>
			<div style="padding: 0.5em 1em;">
				<hr color="#EEE" />
			</div>
			<p style="padding: 0 1em;text-align:left;">为DCloud提供的免费软件进行赞助吧。</p>
			<br/>
			<div style="padding: 0 1em;text-align:left">
				捐赠金额：
				<input id="total" type="number" value="1" /> 元
			</div>
			<br/>
			
            	<div class="button" onclick="clicked('payment_iap.html')">iOS应用内支付</div>
           
		</div>
		<div id="output">
			Payment模块管理支付功能，可通过js调用第三方支付服务。通过plus.payment可获取支付管理对象。
		</div>
	</body>
	<script type="text/javascript" src="js/immersed.js"></script>

</html>